<h2>Why is this an issue?</h2>
<p><code>!important</code> within keyframes declarations is completely ignored in some browsers and therefore it should not be used to be consistent
among all browsers.</p>
<h3>Noncompliant code example</h3>
<pre>
@keyframes kf {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* Noncompliant; ignored */
  to   { margin-top: 100px; }
}
</pre>
<h3>Compliant solution</h3>
<pre>
@keyframes kf {
  from { margin-top: 50px; }
  50%  { margin-top: 150px; }
  to   { margin-top: 100px; }
}
</pre>
<h2>Resources</h2>
<ul>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe">Mozilla Web Technology for Developers</a> -
  <code>!important</code> in a keyframe </li>
</ul>
